<template>
	<view>
		<!-- <view class="section_3" v-for="(item,index) in 4" :key="index">
			<view class="group_4">
				<view class="image-wrapper_2">
					<image
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg"
						class="label_1"></image>
				</view>
				<text lines="1" class="text_14">衡阳奥星</text>
				<text lines="1" class="text_15">已完成</text>
			</view>
			<view class="group_5">
				<image
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/45/9e19f395e62069d85a20ffe52d0192.jpg?attname=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230425084656.jpg"
					class="image_3"></image>
				<view class="group_6">
					<text lines="1" class="text_16">篮球全天票（团购票）</text>
					<view class="tag_2">
						<text lines="1" class="text_17">09:00~11:00</text>
					</view>
					<view class="text-wrapper_4">
						<text lines="1" class="text_18">￥</text>
						<text lines="1" class="text_19">30.</text>
						<text lines="1" class="text_20">00</text>
					</view>
				</view>
				<text lines="1" class="text_21">×1</text>
			</view>
		</view> -->
		<scroll-view scroll-y="true" style="width: 100%;height: 58vh;">
			<view class="group_8 flex-col" v-for="(item,index) in 8" :key="index" @click="orderlist">
				<view class="box_21 flex-row">
					<view class="text-wrapper_14 flex-col">
						<text class="text_36">卡</text>
					</view>
					<text class="text_37">篮球30次计次卡</text>
					<text class="text_38">余次:2000次</text>
				</view>
				<view class="text-wrapper_41 flex-row">
					<text class="text_39">no.121354645</text>
				</view>
				<view class="box_22 flex-row justify-between">
					<text class="text_40">2023/12/12~12/25</text>
					<image class="thumbnail_1" referrerpolicy="no-referrer"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/67571774d49210ea24328b3b92f6ea02ef522980.png" />
				</view>
			</view>
		</scroll-view>
		
		<view class="btns flex-between">
			<u-button text="办卡签单" shape="circle" @click="saveclick"
				color="linear-gradient(0deg, rgba(255,64,64,0.93), rgba(255,64,64,0.93), rgba(250,142,142,0.93));"
				size="large"></u-button>
			<u-button text="好礼相送" shape="circle" @click="saveclick"
				color="linear-gradient(0deg, rgba(255,64,64,0.93), rgba(255,64,64,0.93), rgba(250,142,142,0.93));"
				size="large"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			saveclick() {
				uni.navigateTo({
					url: '../../marketing_jifts/gift_giving'
				})
			},
			orderlist() {
				uni.navigateTo({
					url: '../../member_card/service'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	
		/deep/.u-button {
			&+.u-button {
				// margin-left: 40rpx;
	
			}
		}
	}
	.group_8 {
		box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.110000);
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		height: 169rpx;
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0 0 0;
	}

	.box_21 {
		width: 647rpx;
		height: 28rpx;
		flex-direction: row;
		display: flex;
		margin: 28rpx 0 0 20rpx;
	}

	.text-wrapper_14 {
		background-color: rgba(47, 117, 250, 1.000000);
		border-radius: 5rpx;
		height: 32rpx;
		display: flex;
		flex-direction: column;
		width: 32rpx;
	}

	.text_36 {
		width: 23rpx;
		height: 23rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 23rpx;
		margin: 4rpx 0 0 3rpx;
	}

	.text_37 {
		width: 208rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 1rpx 0 0 19rpx;
	}

	.text_38 {
		width: 151rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
		margin: 2rpx 0 0 240rpx;
	}

	.text-wrapper_41 {
		width: 178rpx;
		height: 20rpx;
		display: flex;
		flex-direction: row;
		margin: 19rpx 0 0 69rpx;
	}

	.text_39 {
		width: 178rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.box_22 {
		width: 590rpx;
		height: 25rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0 29rpx 69rpx;
	}

	.text_40 {
		width: 250rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 34rpx;
	}

	.thumbnail_1 {
		width: 12rpx;
		height: 20rpx;
		margin-top: 4rpx;
	}






























	// 注释得css
	.section_3 {
		box-shadow: 0px 13px 57px 0px rgba(8, 73, 162, 0.11);
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 16rpx;
		height: 316rpx;
		width: 690rpx;
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
	}

	.group_4 {
		width: 642rpx;
		height: 40rpx;
		flex-direction: row;
		display: flex;
		margin: 40rpx 0 0 24rpx;
	}

	.image-wrapper_2 {
		background-color: rgba(160, 199, 2, 1.0);
		border-radius: 50%;
		height: 40rpx;
		display: flex;
		flex-direction: column;
		width: 40rpx;
	}

	.label_1 {
		width: 33rpx;
		height: 26rpx;
		margin: 7rpx 0 0 4rpx;
	}

	.text_14 {
		width: 141rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 7rpx 0 0 16rpx;
	}

	.text_15 {
		width: 84rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(255, 65, 5, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 7rpx 0 0 361rpx;
	}

	.group_5 {
		width: 642rpx;
		height: 180rpx;
		flex-direction: row;
		display: flex;
		margin: 32rpx 0 24rpx 24rpx;
	}

	.image_3 {
		width: 180rpx;
		height: 180rpx;
	}

	.group_6 {
		width: 241rpx;
		height: 158rpx;
		display: flex;
		flex-direction: column;
		margin: 13rpx 0 0 24rpx;
	}

	.text_16 {
		width: 241rpx;
		height: 25rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}

	.tag_2 {
		background-color: rgba(243, 243, 243, 1.000000);
		border-radius: 18rpx;
		height: 36rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		width: 191rpx;
	}

	.text_17 {
		width: 138rpx;
		height: 19rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 8rpx 0 0 27rpx;
	}

	.text-wrapper_4 {
		width: 99rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 20rpx 0 0 1rpx;
	}

	.text_18 {
		width: 99rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_19 {
		width: 99rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_20 {
		width: 99rpx;
		height: 27rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
	}

	.text_21 {
		width: 26rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 147rpx 0 0 171rpx;
	}
</style>